<template>
    <section>
        <DetailsHeader title="发票信息" class="mb-24">
            <div style="margin-left: auto;">
                <span class="col-8A93A7 fz-12 mr-16">最多可创建2条发票信息</span>
                <a-button type="primary" class="card-opt" @click="handleAdd"
                    :disabled="tableList?.length >= 2">新增</a-button>
            </div>
        </DetailsHeader>

        <div class="page-content">
            <a-table :dataSource="tableList">
                <a-table-column key="receiptType" title="发票类型" data-index="receiptType">
                    <template #default="{ record }">
                        {{ record.receiptType == '1' ? '增值税专用发票' : record.receiptType == '2' ? '增值税普通发票' : '' }}
                    </template>
                </a-table-column>
                <a-table-column key="title" title="开票抬头" data-index="title" />
                <a-table-column key="action" title="操作">
                    <template #default="{ record }">
                        <a-button type="link" @click="handleEdit(record)" style="padding-left:0;">编辑</a-button>
                        <a-button type="link" @click="handleDel(record.id)">删除</a-button>
                    </template>
                </a-table-column>
            </a-table>
        </div>

        <!-- 新增发票地址 -->
        <a-modal v-model:visible="modalVisible" title="新增开票信息" @ok="handleOk" @cancel="handleCancel">
            <a-form class="query-list-form" :model="form" ref="formRef">
                <a-form-item name="title" label="发票抬头" :rules="[{ required: true, message: '请填写发票抬头' }]">
                    <a-input placeholder="请填写收件人姓名" v-model:value="form.title"></a-input>
                </a-form-item>
                <a-form-item name="receiptType" label="发票类型" :rules="[{ required: true, message: '请选择发票类型' }]">
                    <a-radio-group v-model:value="form.receiptType" name="radioGroup">
                        <a-radio :value="1">增值税专用发票</a-radio>
                        <a-radio :value="2">增值税普通发票</a-radio>
                    </a-radio-group>
                </a-form-item>
                <a-form-item name="idCode" label="统一社会信用码" :rules="[{ required: true, message: '请填写统一社会信用码' }]">
                    <a-input placeholder="请填写统一社会信用码或纳税人识别号" v-model:value="form.idCode"></a-input>
                </a-form-item>
                <a-form-item name="bankName" label="开户银行名称" :rules="[{ required: true, message: '请填写开户银行名称' }]">
                    <a-input placeholder="请填写开户许可证上的开户银行" v-model:value="form.bankName"></a-input>
                </a-form-item>
                <a-form-item name="bankAccount" label="基本开户账户" :rules="[{ required: true, message: '请填写基本开户账户' }]">
                    <a-input placeholder="请填写开户许可证上的银行账户" v-model:value="form.bankAccount"></a-input>
                </a-form-item>
                <a-form-item name="companyRegisterAddress" label="注册场地场所"
                    :rules="[{ required: true, message: '请填写注册场地场所' }]">
                    <a-input placeholder="请填写营业执照上的详细地址" v-model:value="form.companyRegisterAddress"></a-input>
                </a-form-item>
                <a-form-item name="companyRegisterPhone" label="注册固定电话"
                    :rules="[{ required: true, validator: validTelephone }]">
                    <a-input placeholder="请填写您公司的有效联系电话" v-model:value="form.companyRegisterPhone"></a-input>
                </a-form-item>
            </a-form>
        </a-modal>
    </section>
</template>
<script setup>
import { ref } from 'vue'
import DetailsHeader from '@/components/common/DetailsHeader.vue'
import { getInvoiceListApi, upsetInvoiceApi, delInvoiceApi } from 'api/modules/api.cost'
import { XsyMessage } from '@/libs/util.toast'
import { validTelephone } from '@/libs/util.valid.js'

const tableList = ref([])
// 更改地址
const form = ref({
    type: '2'
})
const modalVisible = ref(false)
const handleAdd = () => {
    form.value.id = undefined
    modalVisible.value = true
}

const formRef = ref();

const handleOk = () => {
    formRef.value.validateFields().then(() => {
        const params = {
            ...form.value,
        }
        upsetInvoiceApi(params).then((res) => {
            if (res.code == 0) {
                XsyMessage.success('操作成功');
                modalVisible.value = false
                getList()
                formRef.value.resetFields();
            }
        })
    })
}

// 点击取消重置表单
const handleCancel = () => {
    formRef.value.resetFields();
}

const queryParams = ref({
    pn: 1,
    ps: 10
})

const getList = () => {
    getInvoiceListApi(queryParams.value).then(res => {
        tableList.value = res.data.list || []
    })
};

getList()

// 编辑
const handleEdit = (record) => {
    modalVisible.value = true
    form.value = {
        ...record,
    }
}

// 删除
const handleDel = (id) => {
    delInvoiceApi(id).then(res => {
        if (res.code == 0) {
            XsyMessage.success('删除成功');
            getList()
        }

    })
}


</script>